<template>
  <div class="organization">
    <div class="header" v-if="type === 'input'" @click="openPopup">
      <div class="header-content">
        <div class="name">
          {{ name || '未选择' }}
        </div>
        <x-icon type="ios-arrow-right" fill="#fff" size="24" v-if="!show"></x-icon>
        <x-icon type="ios-arrow-down" fill="#fff" size="24" v-if="show"></x-icon>
      </div>
    </div>
    <popup v-model="show" :show-mask="false" class="popup">
      <div class="main_wrapper" v-if="show">
        <div class="fixed_dep_box">
          <div class="btn_box">
            <div class="department_select" :class="showTree ? 'active' : ''" @click="showTreeFn(true)">
              <p class="department_name">
                {{ curDepartment.departmentName }}
              </p>
              <iconSvg name="downFill" w="23px" height="13px" class="selece_icon" ref="selece_icon"></iconSvg>
            </div>
            <transition name="slide">
              <div class="dep_box" v-show="showTree">
                <dep-tree ref="depTree" @changeId="selectDepartment" @showTreeFn="showTreeFn" @initCurDepartment="initCurDepartment" :initDepartment="curDepartment"></dep-tree>
              </div>
            </transition>
          </div>
          <div v-if="showTree" @click="showTreeFn(false)" style="position: fixed;top: 0;left:0; width: 100vw;height: 100vh; z-index: 9"></div>
        </div>
        <div class="search">
          <div class="inputBox">
            <input type="text" class="searchFun" v-model="userContent" placeholder="搜索" />
          </div>
          <div class="searchBtn" @click="search">搜索</div>
        </div>
        <ul id="demo">
          <li v-for="(item, index) in searchList" :key="index" class="userList">
            <label class="userListContent">
              {{ item.name }}
              <template v-if="multiple">
                <input class="selecet_depart" name="department" type="checkbox" :checked="multipleData.some((e) => e.id === item.id)" @click.stop="getSelectData(item)" />
              </template>
              <template v-else>
                <input class="selecet_depart" name="department" type="radio" :value="item.id" @click.stop="getSelectData(item)" />
              </template>
            </label>
          </li>
          <li v-if="!searchList.length" class="userList" style="text-align: center;">
            <span style="color:gray;">暂无负责人</span>
          </li>
        </ul>
      </div>
      <div class="footer" v-if="show">
        <div class="btn" @click="cancel">取消</div>
        <div class="btn" @click="confirm">完成</div>
      </div>
    </popup>
  </div>
</template>
<script>
import { Popup } from 'vux';
import TaskDao from '@/daos/task_dao';
import depTree from '@/components/common/tree';

export default {
  name: 'selectUser',
  components: {
    depTree,
    Popup,
  },
  props: {
    name: {
      type: String,
      default: '',
    },
    show: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'input',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    userType: {
      type: String,
      default: 'leader',
    },
    initSelectUser: {
      type: Array,
      default: () => [],
    },
    initSelectUserId: {
      type: Array,
      default: () => [],
    },
    initDepartmentId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      showTree: false,
      userContent: '', //用户输入的内容
      departPeople: {},
      peopleData: [],
      multipleData: [],
      curDepartment: {
        departmentName: '全企业',
        id: '',
      },
    };
  },
  watch: {
    userType: {
      handler: function() {
        this.getPeople(this.curDepartment.id);
      },
    },
    initSelectUser: {
      handler: function(val) {
        if (val.length) {
          this.multipleData.push(...val);
        }
      },
      immediate: true,
    },
    initSelectUserId: {
      handler: function() {},
      immediate: true,
    },
    initDepartmentId: {
      handler: function() {
        if (this.initDepartmentId) {
          this.selectDepartment(this.initDepartmentId, '');
        }
      },
      immediate: true,
    },
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    searchList() {
      let arr = [].concat(this.peopleData);
      if (!this.userContent) {
        return arr;
      }
      arr = arr.filter((e) => e.name.includes(this.userContent));
      return arr;
    },
  },
  created() {},
  methods: {
    search() {},
    getPeople(departmentId) {
      this.userType === 'leader' ? this.getLeader(departmentId) : this.getAllUser(departmentId);
    },
    getAllUser(departmentId) {
      TaskDao.getAllUserByDepartmentId(departmentId, (data) => {
        if (data) {
          this.peopleData = data;
        }
      });
    },
    getLeader(departmentId) {
      TaskDao.getAdminister(departmentId, (data) => {
        if (data) {
          this.peopleData = data;
        }
      });
      // SpotCheckDao.getOutboundOrderUserByDepartment(departmentId, res => {
      //   if (res && res.length) {
      //     this.peopleData = res;
      //   }
      // });
    },
    showTreeFn(status) {
      if (this.$refs.selece_icon) {
        this.$refs.selece_icon.$el.style.transform = status ? 'rotate(-180deg)' : 'rotate(0deg)';
      }
      this.showTree = status;
    },
    initCurDepartment(id, departmentName) {
      this.curDepartment = {
        departmentName,
        id: id,
      };
    },
    selectDepartment(id, departmentName) {
      this.curDepartment = {
        departmentName,
        id,
      };
      this.getPeople(id);
    },
    // 打开选择器
    openPopup() {
      if (this.disabled) {
        return;
      }
      this.$emit('update:show', true);
    },
    // 单选按钮的点击事件
    getSelectData(data) {
      let item = JSON.parse(JSON.stringify(data));
      if (this.multiple) {
        let index = this.multipleData.findIndex((e) => e.id == item.id);
        if (index === -1) {
          this.multipleData.push(item);
        } else {
          this.multipleData.splice(index, 1);
        }
      }
      this.departPeople = item;
    },
    // 点击完成按钮
    confirm() {
      this.$emit('update:show', false);
      if (this.departPeople.id) {
        if (this.multiple) {
          this.$emit('selected', this.multipleData);
        } else {
          this.$emit('selected', this.departPeople);
        }
      }
    },
    cancel() {
      this.$emit('update:show', false);
    },
  },
};
</script>
<style lang="less" scoped>
.fixed_dep_box {
  // padding: 5px 0;
  background: #22233f;
  .btn_box {
    display: flex;
    // padding: 0 16px;
    justify-content: space-between;
    position: relative;
    height: 28px;
    .department_select {
      position: relative;
      width: 100%;
      border-radius: 2px;
      background: #292a4d;
      transition: background 0.3s ease-in-out;
      &.active {
        background: #383a69;
      }
      .department_name {
        padding: 5px 9px;
        padding-right: 30px;
        color: #fff;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align-last: left;
      }
      .selece_icon {
        position: absolute;
        top: 50%;
        right: 8px;
        margin-top: -6px;
        transition: transform 0.3s ease-in-out;
        transform-origin: 50% 50%;
      }
    }
    .dep_box {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: -255px;
      padding-right: 16px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 4px;
      height: 250px;
      overflow-y: scroll;
      z-index: 9999999;
      -webkit-overflow-scrolling: touch;
    }
    .toggle {
      outline: none;
      border: none;
      background: inherit;
      font-size: 14px;
      color: #fff;
      .btn_icon {
        margin-top: -5px;
      }
    }
  }
}
input {
  &::placeholder {
    color: gray !important;
  }
}
.organization .vux-popup-mask {
  display: none !important;
}
.organization {
  width: 100%;
}
.main_wrapper {
  color: #fff;
  width: 100%;
  z-index: 999;
  font-size: 16px;
  padding: 16px 8px;
  box-sizing: border-box;
}
.header {
  width: 100%;
  font-size: 16px;
  padding: 0 !important;
  .header-content {
    padding: 0 !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    img {
      width: 5px;
      height: 11px;
      margin-left: 15px;
    }
  }
}
.footer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  padding: 20px 0;
  background: #18182c;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 9999;
  .cancel,
  .btn {
    padding: 10px 5px !important;
    background: #3967dc;
    color: #ffffff;
    font-size: 16px;
    width: 145px;
    text-align: center;
    border-radius: 13px;
  }
  .cancel {
    margin-left: 3%;
  }
  .btn {
    // margin-right: 3%;
  }
}
.iconfont {
  margin-right: 10px;
  font-size: 14px;
}
.vux-popup-dialog {
  height: 100vh !important;
  top: 0;
  bottom: unset !important;
  background: #18182c !important;
  font-size: 14px;
  padding: 0 11px 0 13px;
  box-sizing: border-box;
}
.name {
}
// .icon1{
//     margin-left: 5px;
// }
// .icon2{
//     margin-left: 5px;
//     transform:rotate(90deg);
//     -ms-transform:rotate(90deg); 	/* IE 9 */
//     -moz-transform:rotate(90deg); 	/* Firefox */
//     -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
//     -o-transform:rotate(90deg);
// }
.selecet_depart {
  // -webkit-appearance: none;
  // line-height: 40px;
  // position: absolute;
  // right:20px;
  // margin-top: 1.5em;
  position: absolute;
  right: 10px;
  display: inline-block;
  vertical-align: middle;
  /* 当成为行内块元素时它就可以垂直居中了 */
  width: 18px;
  height: 18px;
  -webkit-appearance: none;
  /* 清除原有的样式 */
  background-color: transparent;
  border: 0;
  outline: 0 !important;
  /* 去掉点击后外面可能会出现的蓝框 */
  line-height: 20px;
  color: #d8d8d8;
}

.selecet_depart:after {
  /* //在input的内容之后插入新内容 */
  position: absolute;
  top: 12px;
  right: 10px;
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-align: center;
  line-height: 12px; /* no */
  font-size: 14px;
  color: #fff;
  border: 3px solid #ddd;
  background-color: #fff;
  box-sizing: border-box;
  margin-top: -13px;
  /* 规定两个并排的带边框的框 */
}

.selecet_depart:checked:after {
  /* 选中之后的样子 */
  content: 'L';
  transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
  /* 2D变换旋转，还有平移和缩放，平时旋转用rotate，这个写法是比较复杂一点的写法，
        括号里面的六个值来得矩阵，实现2D变换，更详细的大家去百度查。 */
  -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
  border-color: #456de6;
  background-color: #456de6;
  position: absolute;
  right: 10px;
}

/********************列表的样式********************/
#demo {
  overflow-y: scroll;
  box-sizing: border-box;
  padding-bottom: 68px;
  .userList {
    padding: 8px 0;
    border-bottom: 1px solid #434358;
    // overflow: hidden;
    .userListContent {
      display: inline-block;
      width: 80%;
      text-align: left;
      // float: left;
    }
  }
}

// 搜索
.search {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  background-color: #18182c;
  margin: 6px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .inputBox {
    width: 100%;
    height: 100%;
    padding: 0 8px;
    background-color: #11111f;
    box-sizing: border-box;
    border-radius: 4px;
    .searchFun {
      width: 90%;
      height: 100%;
      border: none;
      outline: none;
      font-size: 15px;
      color: #ffffff;
    }
    .searchPic {
      float: right;
      width: 10%;
      height: 100%;
    }
  }
  .searchBtn {
    flex: none;
    padding: 0 8px;
    color: rgba(255, 255, 255, 0.6);
  }
}

// 分割线
.division {
  width: 100%;
  height: 10px;
  background-color: #22233f;
  margin-bottom: 10px;
}

// 搜索框placeholder
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #fff;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #fff;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #fff;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #fff;
}
</style>
